<template>
    <div class="login-container">
        <!-- 背景装饰 -->
        <div class="medical-bg"></div>
        
        <!-- 主要内容区 -->
        <div class="login-content">
            <!-- 头部标题 -->
            <div class="header">
                <div class="logo">
                    <i class="fa fa-heartbeat"></i>
                </div>
                <h1>AI家庭医生<br>您的健康管理专家</h1>
                <p class="subtitle">智能医疗 · 健康管理</p>
            </div>

            <!-- 登录表单 -->
            <div class="login-form">
                <!-- 登录方式切换 -->
                <div class="login-type-switch">
                    <span 
                        :class="['switch-item', { active: loginType === 'account' }]"
                        @click="loginType = 'account'"
                    >
                        <i class="fa fa-user-md"></i> 账号密码登录
                    </span>
                    <span 
                        :class="['switch-item', { active: loginType === 'sms' }]"
                        @click="loginType = 'sms'"
                    >
                        <i class="fa fa-mobile"></i> 短信验证码登录
                    </span>
                </div>

                <!-- 账号密码登录表单 -->
                <div v-if="loginType === 'account'" class="form-group">
                    <div class="input-group">
                        <i class="fa fa-phone"></i>
                        <input 
                            type="text" 
                            placeholder="请输入手机号/账号"
                            v-model="accountForm.username"
                        >
                    </div>
                    <div class="input-group">
                        <i class="fa fa-lock"></i>
                        <input 
                            :type="showPassword ? 'text' : 'password'"
                            placeholder="请输入密码"
                            v-model="accountForm.password"
                        >
                        <i 
                            :class="['fa', showPassword ? 'fa-eye-slash' : 'fa-eye']"
                            @click="showPassword = !showPassword"
                        ></i>
                    </div>
                </div>

                <!-- 短信登录表单 -->
                <div v-else class="form-group">
                    <div class="input-group">
                        <i class="fa fa-phone"></i>
                        <input 
                            type="tel" 
                            placeholder="请输入手机号"
                            v-model="smsForm.phone"
                        >
                    </div>
                    <div class="input-group verification">
                        <i class="fa fa-lock"></i>
                        <input 
                            type="text" 
                            placeholder="请输入验证码"
                            v-model="smsForm.code"
                        >
                        <button 
                            class="send-code-btn"
                            :disabled="countdown > 0"
                            @click="sendVerificationCode"
                        >
                            {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
                        </button>
                    </div>
                </div>

                <!-- 登录按钮 -->
                <button 
                    class="login-btn" 
                    @click="handleLogin"
                    :disabled="loading"
                >
                    <i class="fa fa-sign-in"></i>
                    {{ loading ? '登录中...' : '登录' }}
                </button>

                <!-- 底部链接 -->
                <div class="bottom-links">
                    <a @click="toRegister">
                        <i class="fa fa-user-plus"></i> 注册账号
                    </a>

                </div>
            </div>

            <!-- 底部信息 -->
            <div class="footer">
                <p>需要帮助？<a href="tel:10086"><i class="fa fa-headphones"></i> 联系客服</a></p>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import 'element-plus/es/components/message/style/css';
import Session, { getItem, setItem } from '@/components/Session.vue';

export default {
    setup() {
        const router = useRouter();
        const loginType = ref('account');
        const showPassword = ref(false);
        const countdown = ref(0);
        const loading = ref(false);

        const accountForm = reactive({
            username: '',
            password: ''
        });

        const smsForm = reactive({
            phone: '',
            code: ''
        });

        // 发送验证码
        const sendVerificationCode = () => {
            if (countdown.value > 0) return;
            // TODO: 实现发送验证码逻辑
            countdown.value = 60;
            const timer = setInterval(() => {
                countdown.value--;
                if (countdown.value <= 0) {
                    clearInterval(timer);
                }
            }, 1000);
        };

        // 处理登录
        const handleLogin = async () => {
            if (!accountForm.username || !accountForm.password) {
                ElMessage({
                    message: '请输入用户名和密码',
                    type: 'warning',
                    duration: 3000
                });
                return;
            }

            loading.value = true;
            try {
                const response = await axios.post('/api/user/login', {
                    username: accountForm.username,
                    password: accountForm.password
                });

                if (response.data.code === 200) {
                    setItem("user",accountForm)
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                        duration: 2000
                    });
                    router.push('/home');
                } else {
                    ElMessage({
                        message: response.data.message || '登录失败',
                        type: 'error',
                        duration: 3000
                    });
                }
            } catch (error) {
                console.error('登录失败:', error);
                ElMessage({
                    message: '登录失败，请稍后重试',
                    type: 'error',
                    duration: 3000
                });
            } finally {
                loading.value = false;
            }
        };

        // 页面跳转
        const toRegister = () => router.push('/register');
        const toResetPassword = () => router.push('/resetpassword');

        return {
            loginType,
            showPassword,
            countdown,
            loading,
            accountForm,
            smsForm,
            sendVerificationCode,
            handleLogin,
            toRegister,
            toResetPassword
        };
    }
};
</script>

<style scoped>
/* Base Container */
.login-container {
    min-height: 100vh;
    width: 100%;
    background-color: #f8f9fa; /* Updated background */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 20px; /* Use px */
    box-sizing: border-box;
    font-family: 'Inter', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

/* Background Decoration */
.medical-bg { /* Simplified background decoration */
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.03) 0%, rgba(33, 150, 243, 0.03) 100%); /* Use theme colors subtly */
    z-index: 0;
}
.medical-bg::before, .medical-bg::after {
    content: ''; position: absolute; width: 200px; height: 200px;
    border-radius: 50%; background: rgba(33, 150, 243, 0.02); /* Use theme color subtly */
}
.medical-bg::before { top: -50px; right: -50px; }
.medical-bg::after { bottom: -50px; left: -50px; }

/* Login Content Box */
.login-content {
    width: 100%;
    max-width: 400px;
    background: white;
    border-radius: 16px; /* Consistent radius */
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); /* Adjusted shadow */
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* Header */
.header { text-align: center; margin-bottom: 30px; }
.logo {
    width: 80px; height: 80px;
    margin: 0 auto 20px;
    /* Updated gradient to match HomeView header */
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.2); /* Use theme color */
}
.logo i { font-size: 40px; color: white; }
h1 { color: #333; font-size: 24px; font-weight: 600; margin-bottom: 8px; line-height: 1.3; } /* Updated color */
.subtitle { color: #666; font-size: 14px; margin: 0; } /* Updated color */

/* Login Form Area */
.login-form { margin-bottom: 25px; }

/* Login Type Switch */
.login-type-switch {
    display: flex;
    margin-bottom: 25px;
    background: #e9ecef; /* Kept light background */
    border-radius: 25px; /* Pill shape */
    padding: 5px;
    overflow: hidden;
}
.switch-item {
    flex: 1; text-align: center;
    padding: 10px 5px; /* Adjusted padding */
    font-size: 14px;
    color: #666; /* Updated text color */
    cursor: pointer;
    border-radius: 20px; /* Inner pill shape */
    transition: all 0.3s ease;
    font-weight: 500;
    white-space: nowrap;
}
.switch-item i { margin-right: 6px; }
.switch-item.active {
    background: white;
    color: #2196F3; /* Use theme primary color (blue) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Form Group */
.form-group { margin-bottom: 0; /* Reset margin, handled by input-group */}

/* Input Group */
.input-group {
    position: relative;
    margin-bottom: 20px; /* Consistent spacing */
}
.input-group i:not(.fa-eye):not(.fa-eye-slash) { /* Icon on the left */
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd; /* Kept icon color */
    font-size: 18px;
    z-index: 2;
}
/* Eye icon on the right */
.input-group i.fa-eye, .input-group i.fa-eye-slash {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd; /* Kept icon color */
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
}
.input-group input {
    width: 100%;
    padding: 12px 15px 12px 45px; /* Adjust padding for left icon */
    border: 1px solid #dee2e6; /* Kept border color */
    border-radius: 10px;
    font-size: 15px;
    height: 44px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group input[type="password"],
.input-group input:-webkit-autofill { /* Adjust padding for password/autofill with eye icon */
    padding-right: 45px;
}
.input-group input:focus {
    border-color: #2196F3; /* Use theme primary color (blue) */
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1); /* Use theme color */
    outline: none;
}

/* Verification Code Input Group */
.input-group.verification {
    display: flex;
    gap: 10px;
}
.input-group.verification input {
    flex: 1; /* Input takes available space */
    min-width: 0;
    padding-left: 45px; /* Ensure left padding with icon */
}
.send-code-btn {
    padding: 0 15px;
    background: #e9ecef; /* Kept background */
    color: #495057; /* Kept text color */
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    height: 44px;
}
.send-code-btn:not(:disabled):hover { background: #dee2e6; }
.send-code-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Login Button */
.login-btn {
    /* Use primary-button styles */
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #4CAF50, #2196F3); /* Updated gradient */
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px; /* Slightly taller */
    margin-top: 10px; /* Spacing above button */
}
.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.2); /* Updated shadow color */
}
.login-btn:active { transform: translateY(0); }
.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Bottom Links */
.bottom-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.bottom-links a {
    color: #2196F3; /* Use theme primary color (blue) */
    font-size: 13px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color 0.2s;
}
.bottom-links a:hover { color: #1976D2; } /* Darker shade of theme blue */
.bottom-links i { font-size: 14px; }

/* Footer */
.footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #e9ecef; /* Kept border color */
}
.footer p { color: #666; font-size: 13px; margin: 0; } /* Updated text color */
.footer a { color: #2196F3; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: color 0.2s; } /* Use theme primary color (blue) */
.footer a:hover { color: #1976D2; } /* Darker shade of theme blue */
.footer i { font-size: 14px; }

/* Responsive Adjustments */
@media (max-width: 400px) {
    .login-content { padding: 20px; }
    h1 { font-size: 22px; }
    .subtitle { font-size: 13px; }
    .switch-item { font-size: 13px; padding: 8px 5px; }
    .input-group input { height: 42px; font-size: 14px; padding-left: 40px; }
    .input-group i:not(.fa-eye):not(.fa-eye-slash) { font-size: 16px; left: 12px; }
    .input-group i.fa-eye, .input-group i.fa-eye-slash { font-size: 15px; right: 12px; }
    .send-code-btn { height: 42px; font-size: 13px; padding: 0 12px; }
    .login-btn { height: 44px; font-size: 15px; }
    .bottom-links a, .footer p, .footer a { font-size: 12px; }
}
</style>